<template>
  <el-dialog title="分配角色" :visible.sync="isShow" @close="closeEvent">
    <h1>{{ selectArr }}</h1>
    <el-checkbox
      v-for="item in roleList"
      :key="item.id"
      v-model="selectArr"
      :label="item.id"
    >{{ item.name }}</el-checkbox>
    <template #footer>
      <div style="text-align: center">
        <el-button type="primary" @click="submit">提交</el-button>
        <el-button @click="isShow = false">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script>
import { sysRole } from '@/api/setting'
import { sysUser } from '@/api/login'
import { sysUserAssignRoles } from '@/api/employees'
export default {
  data() {
    return {
      isShow: false,
      roleList: [],
      selectArr: [],
      id: ''
    }
  },
  created() {
    this.getData()
  },
  methods: {
    // 清空数据
    closeEvent() {
      this.selectArr = []
    },
    async getData() {
      const res = await sysRole({
        page: 1,
        pagesize: 9999
      })
      this.roleList = res.data.rows
      console.log('角色列表', res)
    },
    // 获取用户的角色数据
    async getUserRole(id) {
      // 存储id给分配角色时使用
      this.id = id
      const res = await sysUser(id)
      this.selectArr = res.data.roleIds || []
      //   开发环境ok了。到了生产出问题了
      //   数量量小，某些字段它没跑出来
      //   先看出错的那条数据和其它数据有什么不同
      //   this.selectArr = null
      console.log('获取用户的角色数据', res)
    },
    // 提交点击
    async submit() {
      // 调用分配角色api
      await sysUserAssignRoles({
        id: this.id,
        roleIds: this.selectArr
      })
      // 提示
      this.$message.success('分配角色成功')
      // 关闭弹框
      this.isShow = false
    }
  }
}
</script>
<style></style>
